import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { ArticleDetail } from '@/store/reducer/article';
import { Popup, Toast } from 'antd-mobile';
import CommentInput from '../CommentInput';
import { useState } from 'react';
import { useAppDispatch } from '@/store';
import { collectArticleAction, getArticleDetailAction, likeArticleAction } from '@/store/action/article';
import Share from '../Share';
type CommentFooterProps = {
  // normal 普通评论
  // reply 回复评论
  type?: 'normal' | 'reply';
  detail?: ArticleDetail;
  jumpToComment?: () => void;
};
export default function CommentFooter({ type = 'normal', detail, jumpToComment }: CommentFooterProps) {
  const dispatch = useAppDispatch();
  const [commentVisible, setCommentVisible] = useState(false);
  const [shareVisible, setShareVisible] = useState(false);
  const handleOpenPopup = () => {
    setCommentVisible(true);
  };
  //文章点赞
  const handleLikeArticle = async () => {
    //发送点赞请求
    const hasLiked = detail?.attitude === 1;
    await dispatch(likeArticleAction(detail!.art_id, hasLiked));
    //刷新文章详情
    await dispatch(getArticleDetailAction(detail!.art_id));
    Toast.show({ content: hasLiked ? '取消点赞' : '点赞成功' });
  };
  //文章收藏
  const hanleCollectArticle = async () => {
    const hasCollected = detail!.is_collected;
    await dispatch(collectArticleAction(detail!.art_id, hasCollected));
    //刷新文章详情
    await dispatch(getArticleDetailAction(detail!.art_id));
    Toast.show({ content: hasCollected ? '取消收藏' : '收藏成功' });
  };
  return (
    <div className={styles.root}>
      <div className="comment-footer">
        <div className="input-btn" onClick={handleOpenPopup}>
          <Icon type="iconbianji" />
          <span>去评论</span>
        </div>

        {type === 'normal' && (
          <>
            <div className="action-item" onClick={jumpToComment}>
              <Icon type="iconbtn_comment" />
              <p>评论</p>
              {!!detail?.comm_count && <span className="bage">{detail?.comm_count}</span>}
            </div>
            {/* 'iconbtn_like2' */}
            <div className="action-item" onClick={handleLikeArticle}>
              <Icon type={detail?.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
              <p>点赞</p>
            </div>
          </>
        )}
        <div className="action-item" onClick={hanleCollectArticle}>
          {/* 'iconbtn_collect' */}
          <Icon type={detail?.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'} />
          <p>收藏</p>
        </div>
        <div className="action-item" onClick={() => setShareVisible(true)}>
          <Icon type="iconbtn_share" />
          <p>分享</p>
        </div>
      </div>
      <Popup visible={commentVisible}>
        <CommentInput onBack={() => setCommentVisible(false)}></CommentInput>
      </Popup>
      <Popup visible={shareVisible}>
        <Share oncancelSharePopup={() => setShareVisible(false)} />
      </Popup>
    </div>
  );
}
